import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView, StatusBar,
} from 'react-native';
import { WebView } from 'react-native-webview';
// 取得屏幕的宽高Dimensions
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";
const { width, height } = Dimensions.get('window')


export default class WxPay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: null,
            imgW: 0,
            imgH: 0
        };
        this.payImage = null;
    }
    static navigationOptions = {
        title: '微信支付',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentDidMount() {
        var thumb = require('../../image/wxpay.jpg');
        this.setState({
            imw: width,
            imh: Image.resolveAssetSource(thumb).height * (width / Image.resolveAssetSource(thumb).width),
        })
        this.payImage = Httpc.imgPate(Ugame.base_img.pay.wxpay);
        console.log(this.payImage);
        this.setSize(this.payImage);
    }
    setSize(img) {
        Image.getSize(img, (w, h) => {//多张则循环判断处理
            this.setState({
                imgW: width,
                imgH: h * (width / w)
            });

        });

    }
    render() {
        let { imgW, imgH } = this.state;
        if (imgW == 0) {
            return (
                <View></View>
            );
        }
        //var thumb = require('../../image/wxpay.jpg');
        var thumb = { uri: this.payImage };
        console.log(thumb);
        return (
            <View style={styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView>
                    <Image
                        style={{ width: imgW, height: imgH }}
                        source={thumb} />
                    <Text style={{ color: '#333333', paddingTop: 12, width: width, textAlign: 'center',marginBottom:20 }}>付款成功后，请联系店主及时重置！</Text>

                </ScrollView>

            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#f7f7f7',
    },
});